//使用ajax访问api接口获取数据完成显示

/**
 * 清空查询输入框的内容
 */
// 监听学号清除按钮
$('#btn_clear_sno').click(function () {
    $('#input_sno').val(''); // 清空学号输入框
});

// 监听姓名清除按钮
$('#btn_clear_name').click(function () {
    $('#input_name').val(''); // 清空姓名输入框
});

// 监听年龄清除按钮
$('#btn_clear_age').click(function () {
    $('#input_age').val(''); // 清空年龄输入框
});

// 监听重置按钮
$('#btn_reset').click(function () {
    // 清空所有输入框
    $('#queryForm input').val('');
    // 重置所有下拉框
    $('#queryForm select').prop('selectedIndex', 0);
});

//刷新按钮
$('#btn_refresh').click(function () {
    //刷新页面
    search(false);
});

/**
 * 弹出 新增 或 更新 学生对话框
 */
let StuInsertLayerIndex; //新增学生对话框的句柄，用于关闭该弹出层
function showStuInsertOrUpdateDialog(id) {
    let title = '新增学生'; //默认是新增学生

    let isCurrentPage = false; //用来判断刷新页面时，要不要重置到第0页

    //id存在，即为修改学生信息
    if (id) {
        isCurrentPage = true; //刷新页面时，维持到当前页
        $("#stu-form-id").css("display", "block") //显示id字段
        title = '编辑学生'

        //读取学生信息，给修改表单并赋初值
        $.ajax({
            url: "/api/student/" + id,
            method: "GET",
        }).done(response => {
                if (response.code === 200 && response.data) {
                    const result = response.data; // 提取 data 对象
                    console.log("返回数据解析成功：", result);

                    // 遍历 result 并填充表单
                    $.each(result, function (key, value) {
                        // 选择表单中对应 name 属性的字段
                        let field = $("#StuForm [name='" + key + "']");

                        if (field.length === 0) {
                            console.error("未找到匹配字段：", key);
                        } else {
                            console.log("匹配字段：", key);
                        }

                        if (field.is(":radio")) {
                            field.filter("[value='" + value + "']").prop("checked", true); //选择对应的单选按钮
                        } else if (field.is(":checkbox")) {
                            // field.prop("checked", value === 'yes'); //选择对应的复选框
                            field.filter("[value='" + value + "']").prop("checked", true); //选择对应的复选框
                        } else {
                            field.val(value); //给表单字段赋值
                        }
                    })
                } else {
                    console.error("返回数据异常或数据为空：", response);
                }
            }
        ).fail(err => {
            console.error("AJAX 请求失败：", err);
        });
    } else {
        $("#StuForm")[0].reset() //清空表单
        $("#stu-form-id").css("display", "none") //隐藏id字段
    }

    StuInsertLayerIndex = layer.open({
        type: 1,
        title: title,
        area: ['500px', 'auto'],
        content: $('#StuForm'), //捕获层
        //刷新表格
        end: function () {
            // 在对话框关闭时刷新表格
            search(isCurrentPage);
        }
    })
}


/**
 * 获取分页查询表单的数据对象
 * @returns {{}}
 */
function getSearchCondition() {
    let formData = {}
    $("#queryForm").find('input,select').each(function () {
        let name = $(this).attr('name'); //获取元素的name属性
        let value = $(this).val(); //获取元素的值

        if (name && value) {
            formData[name] = value; //将name和value添加到formData对象中
        }
    });
    return formData;
}

/**
 * layui.use 方法 控件初始化
 * 阻止表单默认提交(刷新整个页面)、调用提交方法-新增学生
 */
layui.use(function () {
    //1、阻止表单默认提交（刷新整个页面）
    //带有 lay-submit 属性的按钮被点击后，会触发 layui.form.on('submit(XXX)', ...) 事件，
    //其中 XXX 是通过 lay-filter 属性指定的过滤器名称,也就是这里的stu-form-submit
    layui.form.on('submit(stu-form-submit)', function (data) {
        event.preventDefault(); // 阻止表单默认提交

        //调用提交方法-新增/修改学生
        commitStuInsertOrUpdateDialog();
    })

    //2、表格初始化
    const table = layui.table;

    let student = getSearchCondition(); //获取搜索条件

    //创建渲染实例
    table.render({
        elem: '#tbStudent', //指定原始表格元素选择器（推荐id选择器）
        url: '/api/student/page', //数据接口
        method: 'POST', //请求方式
        where: {"data": student}, //请求参数
        contentType: 'application/json', //发送到服务器的数据编码类型

        page: true, //开启分页
        cols: [[ //定义表头
            {type: 'checkbox', fixed: 'left'},
            {field: 'id', title: 'id', sort: true, fixed: 'left'},
            {field: 'name', title: '姓名'},
            {field: 'sno', title: '学号'},
            {
                field: 'sex', title: '性别', sort: true,
                templet: d => d.sex === 1 ? '男' : (d.sex === 2 ? '女' : '未知')
            },
            {field: 'age', title: '年龄', sort: true},
            {field: 'right', title: '操作', minWidth: 125, templet: '#editTemplate'}
        ]],
        done: function (res) {

        }
    })

    //触发单元格工具事件
    table.on('tool(tbStudent)', function (obj) {
        let data = obj.data; //获取当前行的数据
        console.log("监听事件触发，数据为：", data);
        if (obj.event === 'edit') {
            showStuInsertOrUpdateDialog(data.id);
        }
    });

})

/**
 * 查询
 */
function search(isCurrentPage) {
    let student = getSearchCondition(); //获取搜索条件
    if (isCurrentPage) { //页码不归零，保留在当前位置
        // 重新加载表格数据，并将页码为当前位置不动
        layui.table.reload('tbStudent', {
            where: {"data": student}, // 确保传递的查询条件格式正确
        });
    } else { // 将页码重置为第一页
        layui.table.reload('tbStudent', { //将页码归零，避免干扰下次查询
            where: {"data": student}, // 确保传递的查询条件格式正确
            page: {curr: 1} //将页码归零（重置为第一页）
        });
    }
    console.log("查询条件：" + JSON.stringify(student));
}

/**
 * 根据学生id，批量删除学生信息
 */
function deleteStudentByIds() {
    const table = layui.table;
    // 获取表格选中的状态
    const checkStatus = table.checkStatus('tbStudent'); //tbStudent是你的表格的ID 或 lay-filter

    console.log("选中的数据：", checkStatus.data);

    // 提取选中行的id
    const ids = checkStatus.data.map(item => item.id); // 假设数据对象中有id字段
    console.log("选中的ID数组：", ids);

    if (ids.length === 0) {
        layer.msg('请选择要删除的学生！', {icon: 2});
        return;
    }

    layer.confirm('是否确定删除？', {icon: 3}, function () {

        $.ajax({
            url: "/api/student/delete/batch/" + ids.join(","), // 将id数组用逗号连接,
            method: "DELETE"
        }).done(result => {
            layer.msg('删除成功！', {icon: 1});
            // 刷新学生信息页面
            search(true);
        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed: " + textStatus + " - " + errorThrown);
            //这里处理错误逻辑
            layer.msg('删除失败！' + "Request failed: " + textStatus + " - " + errorThrown, {icon: 1});
        })


    }, function () {
        layer.msg('取消');
    });
}


/**
 * 表头排序
 */
function sort() {
    let table = layui.table;
    let sorts = []; // 用于存储多个排序条件

    // 禁用前端自动排序，以便由服务端直接返回排序好的数据
    table.render({
        elem: '#tbStudent',
        autoSort: false, // 禁用前端自动排序。
        // … // 其他属性
    });

    // 触发排序事件
    table.on('sort(tbStudent)', function (obj) {
        console.log(obj.field); // 当前排序的字段名
        console.log(obj.type); // 当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
        console.log(this); // 当前排序的 th 对象

        // 如果排序方式为 null，则从 sorts 数组中移除该排序条件
        if (obj.type === null) {
            console.log("排序被取消，忽略此列。");
            return;
        }

        // 更新 sorts 数组，添加或更新排序条件
        let index = sorts.findIndex(s => s.field === obj.field);
        if (index > -1) {
            // 如果已存在，则更新排序方式
            sorts[index].type = obj.type;
        } else {
            // 如果不存在，则添加新的排序条件
            sorts.push({ field: obj.field, type: obj.type });
        }




        console.log("排序条件：", sorts)

        let student = getSearchCondition(); //获取搜索条件

        // 重新加载表格数据，发送多个排序条件到后端
        table.reload('tbStudent', {
            initSort: obj, // 记录初始排序，如果不设的话，将无法标记表头的排序状态。
            where: {
                data: student, // 将student放入data字段
                sorts: sorts // 发送多个排序条件
            }
        });
    });
}

sort();

/**
 * 提交表单
 * 新增、修改学生
 */
function commitStuInsertOrUpdateDialog() {
    let id = $("#stu-form-id").val() //获取学生表单中的id
    let formData = $("#StuForm").serialize(); //序列化表单数据
    console.log(formData)

    // 禁用确定按钮，防止重复提交
    $("#btn-stu-confirm").prop("disabled", true).addClass("layui-btn-disabled");


    // 定义通用的请求完成处理逻辑--解除按钮禁用状态
    const finalize = () => {
        //解除按钮禁用状态
        $("#btn-stu-confirm").prop("disabled", false).removeClass("layui-btn-disabled");
    };

    // 确定接口地址和请求方法
    //根据id是否存在，判断是否是修改学生信息
    const isUpdate = id != null && id !== "";
    //确定请求接口
    const url = isUpdate ? "/api/student/update" : "/api/student/add";
    //确定请求方法
    const method = isUpdate ? "PUT" : "POST";

    //1.验证表单是否合法（前端已验证）

    //2.将表单数据发送给服务器的对应的接口中，并把提交按钮变灰
    // 提交ajax请求
    $.ajax({
        url: url,
        method: method,
        data: formData // 请求参数
    })
        .done(result => {
            //3.TODO 读取并刷新学生信息页面

            //4.获取服务器返回结果，根据结果提示用户
            console.log(result);
            const successMessage = isUpdate ? "修改成功" : "新增成功";
            if (result.id) {
                layer.msg(successMessage);
            }

            //5.关闭弹出层
            if (StuInsertLayerIndex) {
                layer.close(StuInsertLayerIndex);
            }
        })
        .fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed: " + textStatus + " - " + errorThrown);
            //这里处理错误逻辑
            alert("Error Occurred!");
        })
        .always(finalize); // 无论成功还是失败，都会解除按钮禁用状态

    //6.禁用确定按钮
    //$("#btn-stu-confirm").prop("disabled", true).addClass("layui-btn-disabled");

}



